// // 实现每行四列的网格布局
// .grid {
//   display: grid;
//   grid-template-columns: repeat(4, 1fr);
//   gap: 10px;
// }

// // 实现每行四列的网格布局
// .grid {
//   display: grid;
//   grid-template-columns: repeat(5, 1fr);
//   gap: 10px;
// }

@media (max-width: 720px) {
	// 实现每行两列的网格布局
	.grid {
		&-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 0;
		}
		&-item {
			padding: 8px;
			width: 1/2;
		}
	}
}

@media (min-width: 720px) and (max-width: 1024px) {
	// 实现每行三列的网格布局
	.grid {
		&-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 0;
		}
		&-item {
			padding: 12px;
			width: 1/3;
		}
	}
}

@media (min-width: 1024px) and (max-width: 1440px) {
	// 实现每行四列的网格布局
	.grid {
		&-list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 0;
		}
		&-item {
			padding: 15px;
			width: 1/4;
		}
	}
}

@media (min-width: 1440px) {
	// 实现每行五列的网格布局
	.grid {
		&-list {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 0;
		}
		&-item {
			padding: 15px;
			width: 1/5;
		}
	}
}
